<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设计工具</span>
      </div>
      <el-checkbox-group v-model="checkedTools" @change="setDesignTools">
        <el-checkbox v-for="(item, index) in tools" :key="index" :label="item.id">{{ item.title }}</el-checkbox>

      </el-checkbox-group>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>擅长产品</span>
      </div>
      <el-transfer v-model="selectedProducts" :data="products" :titles="['可选', '我擅长的']" @change="setProducts" />
    </el-card>
  </div>
</template>

<script>
import { getAllList as getTools, setTools } from '@/api/designTool'
import { getAllList as getProducts } from '@/api/product'
import { getToolsById, getProductsById, setProducts } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      tools: [], // 全部设计工具
      checkedTools: [], // 选中的设计工具
      products: [], // 所有的产品
      selectedProducts: [] // 已选择的产品

    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  props: {
    userid: String
  },
  created() {
    this.getToolList()

    this.getProductList()

    if (this.user.id || this.userid) {
      this.getSelectedProducts()
      this.getCheckedTools()
    }
  },
  methods: {
    getToolList() { // 所有设计工具
      getTools().then(res => {
        this.tools = res.data
      })
    },
    getCheckedTools() { // 擅长的设计工具
      const id = this.user.id ? this.user.id : this.userid
      console.log('传入的id：' + id)
      getToolsById(id).then(res => {
        this.checkedTools = res.data.map(o => o.id)
      })
    },
    setDesignTools(ids) { // 修改设计工具
      const id = this.user.id ? this.user.id : this.userid
      setTools(id, ids).then(res => {
        this.checkedTools = ids
      })
    },
    getProductList() { // 所有产品列表
      getProducts().then(res => {
        this.products = res.data.map(d => {
          const obj = { key: d.id, label: d.title }
          return obj
        })
      })
    },
    getSelectedProducts() { // 擅长的产品
      const id = this.user.id ? this.user.id : this.userid
      getProductsById(id).then(res => {
        this.selectedProducts = res.data.map(o => o.id)
      })
    },
    setProducts(ids) { // 修改产品
      const id = this.user.id ? this.user.id : this.userid
      setProducts(id, ids).then(res => {
        this.selectedProducts = ids
      })
    }
  }

}
</script>
